<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帮我选卡</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>

    <div class="pick-card3">
        <div class="banner-back">
            <span onclick="window.history.back()">
                <i>返回</i>
            </span>帮我选卡
        </div>
        <div class="scroll-y">
            <div class="pick-title">
                <h1>03关于您</h1>
                <small>请选择您的基本信息</small>
            </div>

            <div class="pick-feature">
                <div class="about-you">
                    <h1>您的工作</h1>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img tagid="33" src="../img/smart/3/lbgg.png" alt="老板高管">
                                <span>老板高管</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="34" src="../img/smart/3/blsbz.png" alt="白领上班族">
                                <span>白领上班族</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="35" src="../img/smart/3/gdh.png" alt="个体户">
                                <span>个体户</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="36" src="../img/smart/3/xsz.png" alt="学生族">
                                <span>学生族</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="37" src="../img/smart/3/dybsb.png" alt="待业不上班">
                                <span>待业不上班</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="about-you">
                    <h1>您的学历</h1>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img tagid="38" src="../img/smart/3/gzjyx.png" alt="高中及以下">
                                <span>高中及以下</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="41" src="../img/smart/3/dzjbk.png" alt="大专及本科">
                                <span>大专及本科</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img tagid="40" src="../img/smart/3/ssjys.png" alt="硕士及以上">
                                <span>硕士及以上</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="next">
                <a href="smart-select2.html" class="btn">上一步</a>
                <a onclick="next()" class="btn btn-red">生成推荐</a>
            </div>
        </div>
    </div>

    <!-- scripts here -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../public/js/loan/mui.min.js"></script>
    <script>
        var tags = [];
        var nomerImage = {
            "33": "../img/smart/3/lbgg.png",
            "34": "../img/smart/3/blsbz.png",
            "35": "../img/smart/3/gdh.png",
            "36": "../img/smart/3/xsz.png",
            "37": "../img/smart/3/dybsb.png",
            "38": "../img/smart/3/gzjyx.png",
            "40": "../img/smart/3/ssjys.png",
            "41": "../img/smart/3/dzjbk.png",
        };
        var dianImage = {
            "33": "../img/smart/3/lbgg_dian.png",
            "34": "../img/smart/3/blsbz_dian.png",
            "35": "../img/smart/3/gdh_dian.png",
            "36": "../img/smart/3/xsz_dian.png",
            "37": "../img/smart/3/dybsb_dian.png",
            "38": "../img/smart/3/gzjyx_dian.png",
            "40": "../img/smart/3/ssjys_dian.png",
            "41": "../img/smart/3/dzjbk_dian.png",
        };
        $(function () {

            var tagsStr = sessionStorage.getItem("tags3");
            if (tagsStr == null || tagsStr == undefined)
                tags = [];
            else
                tags = tagsStr.split(",");
            if (tags.length > 0) {
                $.each(document.getElementsByTagName('li'), function (index, el) {
                    var a = el.childNodes;
                    if (a.length == 0)
                        return;
                    a = a[0].childNodes;
                    if (a.length == 0)
                        return;
                    var img = $(a[0]);
                    if (tags.contains(img.attr("tagid")))
                        img.attr("src", dianImage[img.attr("tagid")]);
                    else
                        img.attr("src", nomerImage[img.attr("tagid")]);
                });
            }

            $(".pick-feature ul li a img").click(function () {
                var tagId = $(this).attr("tagid");
                var srcs = $(this).attr("src");
                if (srcs.indexOf("_dian") == -1) {
                    if (tags.length >= 6) {
                        mui.alert("最多选择3个");
                        return;
                    }
                    $(this).attr("src", dianImage[tagId]);
                    tags.push(tagId);
                } else {
                    tags.remove(tagId);
                    $(this).attr("src", nomerImage[tagId]);
                }
            });
        });

        function next() {
            window.location.href = "smart-result.html";
            sessionStorage.setItem("tags3", tags);
        }
    </script>
</body>

</html>